<script lang="ts" setup>
import type { Rule } from 'ant-design-vue/es/form';

import { reactive, ref } from 'vue';

import { Page } from '@vben/common-ui';

import {
  Button,
  Card,
  Col,
  Form,
  FormItem,
  Image,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  Row,
  Select,
  Space,
  TabPane,
  Tabs,
} from 'ant-design-vue';
import { v4 as uuidv4 } from 'uuid';

interface FormState {
  goods_name: string;
  type: number;
  category_id: number | undefined;
  delivery_method: number;
  status: number;
  order: number;
  image: any;
  specification_type: number;
  price: number;
  del_price: number;
  inventory: number;
  weight: number;
  inventory_type: number;
  quota: number;
}

const formState = reactive<FormState>({
  goods_name: '',
  type: 1,
  category_id: undefined,
  delivery_method: 1,
  status: 1,
  order: 100,
  image: [
    'https://aliyuncdn.antdv.com/logo.png',
    'https://aliyuncdn.antdv.com/logo.png',
    'https://aliyuncdn.antdv.com/logo.png',
    'https://aliyuncdn.antdv.com/logo.png',
  ],
  specification_type: 1, // 1 单规格 2 多规格
  price: 0,
  del_price: 0,
  inventory: 0,
  weight: 0,
  inventory_type: 1,
  quota: 1,
});

const formRef = ref();
const labelCol = { span: 2 };
const wrapperCol = { span: 10 };
const activeKey = ref('basic');
const categoryList = ref([]);

// 验证规则
const rules: Record<string, Rule[]> = {
  goods_name: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
  order: [{ required: true, message: '请填写商品排序', trigger: 'blur' }],
  category_id: [{ required: true, message: '请选择商品分类', trigger: 'blur' }],
  status: [{ required: true, message: '请选择商品状态', trigger: 'blur' }],
  type: [{ required: true, message: '请选择商品类型', trigger: 'blur' }],
  delivery_method: [
    { required: true, message: '请选择配送方式', trigger: 'blur' },
  ],
};

// 商品类型
const goodsTypeList = [
  {
    title: '实物商品',
    value: 1,
    desc: '物流发货',
  },
  {
    title: '虚拟商品',
    value: 2,
    desc: '无需发货',
  },
];

// 默认商品类型
const goodsTypeItem = ref(1);

// 商品规格组
const specificationArr = ref([]);

// 删除轮播图
const handleImageDel = (index: number) => {
  formState.image.splice(index, 1);
};

// 下一步操作
const handleNext = (next: string) => {
  activeKey.value = next;
};

const generateUniqueKey = () => {
  return uuidv4();
};

// 新增规格组
const handleAddSpecification = () => {
  if (specificationArr.value.length >= 3) {
    return false;
  }
  const key = generateUniqueKey();
  specificationArr.value.push({
    key,
    value: [],
  });
};

// 删除规格组
const handleDelSpecification = (key: string | string, value: any) => {
  const index = specificationArr.value.findIndex((item) => item[key] === value);
  if (index !== -1) {
    specificationArr.value.splice(index, 1);
  }
};

// 新增规格值
const handleAddSpecificationValue = (keys: any) => {
  const index = specificationArr.value.find((item) => item.key === keys);
  const ckey = generateUniqueKey();
  index.value.push({
    key: ckey,
  });
};

// 删除规格值
const handleDelSpecificationValue = (itemKey: any, key: any) => {
  const index = specificationArr.value.find((item) => item.key === itemKey);
  index.value.splice(key, 1);
};
</script>
<template>
  <Page>
    <template #title> 创建商品 </template>
    <Card>
      <Tabs v-model:active-key="activeKey">
        <TabPane key="basic" tab="基本信息">
          <Form
            ref="formRef"
            :label-col="labelCol"
            :model="formState"
            :rules="rules"
            :wrapper-col="wrapperCol"
          >
            <FormItem label="商品类型" name="type">
              <div class="goods-type">
                <div
                  v-for="item in goodsTypeList"
                  :key="item.value"
                  :style="
                    goodsTypeItem === item.value
                      ? `border: 1px solid hsl(var(--primary))`
                      : ''
                  "
                  class="goods-item"
                  @click="goodsTypeItem = item.value"
                >
                  <span
                    :style="
                      goodsTypeItem === item.value
                        ? `color: hsl(var(--primary))`
                        : ''
                    "
                    class="title"
                    >{{ item.title }}</span>
                  <span class="desc">{{ item.desc }}</span>
                  <div v-if="goodsTypeItem === item.value">
                    <div class="san"></div>
                    <div class="check">√</div>
                  </div>
                </div>
              </div>
            </FormItem>
            <FormItem label="商品名称" name="goods_name">
              <Input v-model:value="formState.goods_name" />
            </FormItem>
            <FormItem label="商品分类" name="category_id">
              <Select
                v-model:value="formState.category_id"
                :field-names="{ label: 'name', value: 'id' }"
                :options="categoryList"
                mode="multiple"
              />
            </FormItem>
            <FormItem label="商品图片" name="category_id">
              <Row :gutter="[8, 8]">
                <Col
                  v-for="(item, index) in formState.image"
                  :key="index"
                  :span="4"
                  class="mr-2"
                >
                  <div style="position: relative">
                    <Image
                      :src="item"
                      class="goods-image"
                      height="74px"
                      width="74px"
                    />
                  </div>
                  <span class="delete-icon" @click="handleImageDel(index)">&times;</span>
                </Col>
                <Col :span="4">
                  <div class="goods-add">
                    <span class="icon-[proicons--add] size-14"></span>
                  </div>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="配送方式" name="delivery_method">
              <RadioGroup
                v-model:value="formState.delivery_method"
                name="delivery_method"
              >
                <Radio :value="1">系统默认</Radio>
                <Radio :value="2">单独配置</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="商品状态" name="status">
              <RadioGroup v-model:value="formState.status" name="status">
                <Radio :value="1">上架</Radio>
                <Radio :value="2">下架</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="商品排序" name="order">
              <Input v-model:value="formState.order" />
              <div class="pt-2">数字越小越靠前</div>
            </FormItem>
            <FormItem :wrapper-col="{ offset: 2, span: 2 }">
              <Space>
                <Button @click="handleNext('sku')">下一步</Button>
                <Button type="primary">提交</Button>
              </Space>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane key="sku" force-render tab="库存规格">
          <Form
            ref="formRef"
            :label-col="labelCol"
            :model="formState"
            :rules="rules"
            :wrapper-col="wrapperCol"
          >
            <FormItem label="商品规格" name="specification_type">
              <RadioGroup
                v-model:value="formState.specification_type"
                name="specification_type"
              >
                <Radio :value="1">单规格</Radio>
                <Radio :value="2">多规格</Radio>
              </RadioGroup>
            </FormItem>
            <div v-if="formState.specification_type === 1">
              <FormItem label="商品价格" name="price">
                <InputNumber v-model:value="formState.price">
                  <template #addonAfter> 元 </template>
                </InputNumber>
              </FormItem>
              <FormItem label="划线价格" name="del_price">
                <InputNumber v-model:value="formState.del_price">
                  <template #addonAfter> 元 </template>
                </InputNumber>
              </FormItem>
              <FormItem label="库存数量" name="inventory">
                <InputNumber v-model:value="formState.inventory">
                  <template #addonAfter> 件 </template>
                </InputNumber>
              </FormItem>
              <FormItem label="商品重量" name="weight">
                <InputNumber v-model:value="formState.weight">
                  <template #addonAfter> KG </template>
                </InputNumber>
              </FormItem>
              <FormItem label="库存计算方式" name="inventory_type">
                <RadioGroup
                  v-model:value="formState.inventory_type"
                  name="inventory_type"
                >
                  <Radio :value="1">下单减库存</Radio>
                  <Radio :value="2">付款减库存</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="商品限购" name="quota">
                <RadioGroup v-model:value="formState.quota" name="quota">
                  <Radio :value="1">关闭</Radio>
                  <Radio :value="2">开启</Radio>
                </RadioGroup>
              </FormItem>
            </div>
            <div v-else>
              <FormItem
                :wrapper-col="{ span: 24 }"
                label="商品规格"
                name="order"
              >
                <div class="h-8 leading-8">
                  最多添加3个商品规格组，生成的SKU数量不能超出50个
                </div>
                <div
                  v-for="item in specificationArr"
                  :key="item.key"
                  class="mb-4"
                >
                  <div class="goods-spec">
                    <Input placeholder="请输入规格名称" style="width: 200px" />
                    <Button
                      type="link"
                      @click="handleDelSpecification('key', item.key)"
                    >
                      删除规格组
                    </Button>
                  </div>
                  <div class="goods-spec-value">
                    <Input
                      v-for="spec in item.value"
                      :key="spec.key"
                      class="goods-spec-value-input"
                      placeholder="请输入规格值"
                    >
                      <template #addonAfter>
                        <!-- <span class="icon-[lets-icons:dell-fill]"></span> -->
                        <span
                          class="cursor-pointer"
                          @click="
                            handleDelSpecificationValue(item.key, spec.key)
                          "
                          >删除</span>
                      </template>
                    </Input>
                    <Button
                      type="link"
                      @click="handleAddSpecificationValue(item.key)"
                    >
                      新增规格值
                    </Button>
                  </div>
                </div>
                <Button
                  v-show="specificationArr.length >= 3 === false"
                  @click="handleAddSpecification()"
                >
                  添加规格
                </Button>
              </FormItem>
            </div>
            <FormItem :wrapper-col="{ offset: 2, span: 2 }">
              <Button type="primary">提交</Button>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane key="info" tab="商品详情">
          <wangEditor />
        </TabPane>
        <TabPane key="more" tab="更多操作">Content of Tab Pane 3</TabPane>
      </Tabs>
    </Card>
  </Page>
</template>
<style lang="scss">
.goods-type {
  display: flex;
}

.goods-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 26px;
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid hsl(var(--border));
  border-radius: hsl(var(--radius));

  .title {
    font-size: 14px;
    color: #333;
  }

  .desc {
    font-size: 12px;
    color: #8a9099;
  }
}

.san {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 26px solid hsl(var(--primary));
  border-left: 26px solid transparent;
}

.check {
  position: absolute;
  right: 2px;
  bottom: -2px;
  color: #fff;
}

.goods-image {
  border: 1px solid hsl(var(--border));
}

.goods-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  color: hsl(var(--border));
  cursor: pointer;
  border: 1px dashed hsl(var(--border));
}

.goods-add:hover {
  color: hsl(var(--primary));
  border: 1px dashed hsl(var(--primary));
}

.delete-icon {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  padding: 2px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background-color: #333;
}

.goods-spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px;
  background-color: #f4f5f9;
}

.goods-spec-value {
  padding: 8px 35px;
  background-color: #fbfbfb;
}

.goods-spec-value-input {
  width: 200px;
  margin-right: 10px;
  margin-bottom: 5px;
}
</style>
